<template>
<div>
     {{changeTabData}}
     <ITabs :tabsOption="tabsOption" @changTab="changeTabFun"></ITabs>
      <lib-doc :libDocData="libDocData"></lib-doc>
</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { ITabs } from 'wd-platform-library'
import { TabsInterface } from 'wd-platform-library/lib/src/Itabs/src/ITableInterface'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
interface tabListInterface{
    label: string;
    isShow: boolean;
    value: string;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const changeTabData = ref<{label:string;value:string} | null>(null)
        const tabsOption:TabsInterface = reactive({
            list: []
        })
        const tabList = ref<tabListInterface[]>([
            {
                label: '字典分类管理',
                isShow: true,
                value: 'DictType'
            },
            {
                label: '字典列表管理（公有）',
                isShow: true,
                value: 'DictListPub'
            },
            {
                label: '字典列表管理（私有）',
                isShow: true,
                value: 'DictListPrivate'
            }
        ])
        const changeTabFun = (data: {label:string;value:string}) => {
            changeTabData.value = data
            alert('我选择了' + JSON.stringify(data))
        }
        onMounted(() => {
            tabsOption.list = tabList.value.filter(item => item.isShow === true).map(item => {
                return {
                    value: item.value,
                    label: item.label
                }
            })
        })
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { ITabs } from 'wd-platform-library'
        import { TabsInterface } from 'wd-platform-library/lib/src/Itabs/src/ITableInterface'
        <ITabs :tabsOption="tabsOption" @changTab="changeTabFun"></ITabs>`
                },
                {
                    label: '完整代码示例',
                    type: 'pre',
                    value: `
       <template>
<div>
     {{changeTabData}}
     <ITabs :tabsOption="tabsOption" @changTab="changeTabFun"></ITabs>
</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { ITabs } from 'wd-platform-library'
import { TabsInterface } from 'wd-platform-library/lib/src/Itabs/src/ITableInterface'
interface tabListInterface{
    label: string;
    isShow: boolean;
    value: string;
}
export default defineComponent({
    name: 'i_from_demo',
    setup () {
        const changeTabData = ref<{label:string;value:string} | null>(null)
        const tabsOption:TabsInterface = reactive({
            list: []
        })
        const tabList = ref<tabListInterface[]>([
            {
                label: '字典分类管理',
                isShow: true,
                value: 'DictType'
            },
            {
                label: '字典列表管理（公有）',
                isShow: true,
                value: 'DictListPub'
            },
            {
                label: '字典列表管理（私有）',
                isShow: true,
                value: 'DictListPrivate'
            }
        ])
        const changeTabFun = (data: {label:string;value:string}) => {
            changeTabData.value = data
            alert('我选择了' + JSON.stringify(data))
        }
        onMounted(() => {
            tabsOption.list = tabList.value.filter(item => item.isShow === true).map(item => {
                return {
                    value: item.value,
                    label: item.label
                }
            })
        })
        return {
            changeTabData,
            changeTabFun,
            tabsOption
        }
    },
    components: {
        ITabs,
    }
    <script>
       `
                }
            ]
        }
        return {
            libDocData,
            changeTabData,
            changeTabFun,
            tabsOption
        }
    },
    components: {
        ITabs,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template{
    display: flex;
}
</style>
